<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 警告 -->
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" effect="dark" :closable="false"></el-alert>
      <!-- 级联菜单 -->
      <div class="cd">
        <span>选择商品分类：</span>
        <el-cascader
          v-model="selectedCateKeys"
          :options="CateList"
          :props="cateProps"
          @change="handleChange"
        ></el-cascader>
      </div>
      <!-- tab页签区域 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <!-- 添加动态参数的面板 将标签页改为many -->
        <el-tab-pane label="动态参数" name="many">
          <el-button size="mini" type="primary" :disabled="isButtonDisabled">添加参数</el-button>
          <!-- 动态参数表格 -->
          <el-table :data="manyTableData" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" lable="#"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 添加静态属性的面板 将标签页改为only -->
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="isButtonDisabled">添加属性</el-button>
          <!-- 静态属性表格 -->
          <el-table :data="onlyTableData" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //分类列表
      CateList: [],
      //用户在级联下拉菜单中选中的分类id
      selectedCateKeys: [],
      //   配置级联菜单中数据如何展示
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children"
      },
      //tab页签激活显示的页签项
      activeName: "many",
      //用来保存动态参数数据
      manyTableData: [],
      //用来保存动态静态属性数据
      onlyTableData: [],
      //   添加动态静态参数的弹框
      isButtonDisabled: false
    };
  },
  methods: {
    async getCateList() {
      let { data: res } = await this.$http.get(`categories`);
      //   console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取分类数据失败");
      }
      //将数据列表赋值给cateList
      this.CateList = res.data;
    },
    //当用户在级联菜单中选择内容改变时触发
    async handleChange() {
      let { data: res } = await this.$http.get(
        `categories/${this.cateId}/attributes`,
        {
          params: { sel: this.activeName }
        }
      );
      console.log(res.data);
    },
    handleTabClick() {}
  },
  mounted() {
    this.getCateList();
  }
};
</script>

<style>
.el-card {
  margin-top: 20px;
}
/* 菜单 */
.cd {
  margin: 15px 0;
}
</style>